<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <el-button @click="changeSidebar()"
             class="setting-icon"
             type="primary"
             v-show="!show"
             v-if="!mobile &&!show "
             circle ><el-icon><Setting /></el-icon></el-button>

  <el-drawer append-to-body
             :with-header="true"
             title="设置"
             v-model="show"
             size="30%">
    <div class="setting">
      <h5>导航模式</h5>

      <div class="setting-checkbox">
        <el-tooltip class="item"
                    effect="dark"
                    content="侧边菜单布局"
                    placement="top">
          <div @click="setting.sidebar='vertical';setting.tag=true;setting.topbar=0;"
               class="setting-checkbox-item setting-checkbox-item--side">
          </div>
        </el-tooltip>
        <el-tooltip class="item"
                    effect="dark"
                    content="顶部菜单布局"
                    placement="top">
          <div @click="setting.sidebar='horizontal';setting.tag=true;setting.topbar=1"
               class="setting-checkbox-item setting-checkbox-item--top">
          </div>
        </el-tooltip>

        <el-tooltip class="item"
                    effect="dark"
                    content="门户布局"
                    placement="top">
          <div @click="setting.sidebar='horizontal';setting.tag=false;setting.topbar=2"
               class="setting-checkbox-item setting-checkbox-item--mh">
          </div>
        </el-tooltip>

      </div>
      <h5>页面布局</h5>
      <div class="setting-checkbox">
        <div class="setting-item"
             v-for="(item,index) in list1"
             :key="index">
          {{item.label}}:
          <el-switch v-model="setting[item.value]">
          </el-switch>
        </div>

        <div class="setting-item">
          弹出框方式:
          <el-select v-model="setting.dialogType" style="width: 100px;">
            <el-option
                v-for="item in dialogTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>

      </div>
      <h5>功能调试</h5>
      <div class="setting-checkbox">
        <div class="setting-item"
             v-for="(item,index) in list2"
             :key="index">
          {{item.label}}:
          <el-switch v-model="setting[item.value]">
          </el-switch>
        </div>

        <div class="setting-item">
          引导页
          <el-switch v-model="guideIndex" @change="switchGuide">
          </el-switch>
        </div>

        <div class="setting-item">
          缓存
          <el-button type="text" @click="cleanCache()">清除缓存</el-button>
          <el-button type="text"  @click="refreshCache()">刷新缓存</el-button>
        </div>

      </div>



      <!-- <h5>关闭</h5>
      <div class="setting-checkbox">
        <el-switch v-model="show">
        </el-switch>
      </div> -->



    </div>
  </el-drawer>
</template>

<script>
import { mapGetters } from "vuex";
import { hasMobile } from '@/framework-core/utils/util'
import { setStore, getStore } from '@/framework-core/utils/store'



export default {
  data () {
    return {
      show: false,
      guideIndex:"0",
      mobile:hasMobile(),
      dialogTypeOptions:[
        {
          label: '默认',
          value: ''
        },
        {
          label: '右侧弹框',
          value: 'drawer'
        }
      ],
      list1: [{
        label: '导航标签',
        value: 'tag'
      }, {
        label: '菜单折叠',
        value: 'collapse'
      }, {
        label: '菜单搜索',
        value: 'search'
      }, {
        label: '屏幕全屏',
        value: 'fullscren'
      }, {
        label: '主题选择',
        value: 'theme'
      }, {
        label: '顶部菜单',
        value: 'menu'
      }, {
        label: '通知',
        value: 'notice'
      }
      ],
      list2: [{
        label: '日志调试',
        value: 'debug'
      }, {
        label: '屏幕锁定',
        value: 'lock'
      }]
    }
  },
  computed: {
    ...mapGetters(["isHorizontal", 'setting']),
  },
  created () {
    let guide = getStore({ name: 'guide' });
    this.guideIndex =  !(guide  != null && guide === "1")
  },
  methods:{
    cleanCache(){
      localStorage.clear();
      window.location.reload();

    },
    refreshCache(){
      setStore({ name: 'jrdic', content: "" })
      window.location.reload();
      window.location.reload();
    },
    switchGuide() {
      setStore({
        name: 'guide',
        content: (!this.value)?"0":"1"
      })
    },
    changeSidebar(){
        this.show =!this.show;
        //this.$set(this, 'show', !this.show)
      }
  }
}
</script>


<style lang="scss" >
:deep(.el-drawer__header){
  margin-bottom: 0;
}
.setting {
  &-icon {
    color: #666;
    position: fixed;
    bottom: 200px;
    right: 20px;
    z-index: 2048;
  }
  &-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
  }
  &-checkbox {
    &--check {
      position: absolute;
      color: #409eff;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &-item {
      display: inline-block;
      position: relative;
      width: 44px;
      height: 36px;
      margin-right: 16px;
      overflow: hidden;
      background-color: #f0f2f5;
      border-radius: 4px;
      box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
      cursor: pointer;
      &:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 33%;
        height: 100%;
        background-color: #fff;
        content: "";
      }
      &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 25%;
        background-color: #fff;
        content: "";
      }
      &--side {
        &:before {
          z-index: 1;
          background-color: #001529;
          content: "";
        }
        &:after {
          background-color: #fff;
        }
      }
      &--top {
        &:after {
          background-color: #001529;
        }
      }
    }
  }
}
</style>
